<script setup>
import {Link, useForm} from '@inertiajs/vue3'
import {Message} from '@arco-design/web-vue'
import {route} from "ziggy-js"

const form = useForm({
  phone: '',
  password: '',
  remember: false
})
// 表单验证规则
const rules = {
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
  ]
}
const handleSubmit = () => {
    form.post(route('merchant.login'), {
    onSuccess: () => {
      Message.success('登录成功')
    },
    onError: () => {
      Message.error('手机号或密码错误')
    }

  })
}
</script>

<template>
    <div class="font-inter bg-neutral min-h-screen flex items-center justify-center p-4 bg-pattern">
        <!-- 主容器 -->
        <div class="w-full max-w-6xl flex flex-col lg:flex-row rounded-2xl overflow-hidden card-shadow bg-white">
            <!-- 左侧品牌区域 -->
            <div class="lg:w-1/2 bg-gradient-to-br from-[#165DFF] to-[#722ED1] p-8 lg:p-12 text-white relative overflow-hidden">
                <!-- 装饰元素 -->
                <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -mr-32 -mt-32"></div>
                <div class="absolute bottom-0 left-0 w-48 h-48 bg-white/10 rounded-full -ml-24 -mb-24"></div>

                <div class="relative z-10 h-full flex flex-col justify-between">
                    <!-- 品牌Logo和名称 -->
                    <div class="slide-in">
                        <div class="flex items-center space-x-3 mb-2">
                            <h1 class="text-2xl font-bold">预约收银商户中心</h1>
                        </div>
                        <p class="text-white/80 text-sm line-clamp-3 leading-7"> 登录预约收银商户中心，体验智能化预约管理与高效收银系统，让您的生意经营更简单、更高效。</p>
                    </div>

                    <!-- 品牌介绍 -->
                    <div class="slide-in  mt-8">
                        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold leading-tight mb-4">
                            高效管理 - 轻松收银
                        </h2>

                        <p class="text-white/80 text-sm line-clamp-3 leading-7">
                           登录预约收银商户中心，体验智能化预约管理与高效收银系统，让您的生意经营更简单、更高效。
                        </p>

                        <!-- 特性列表 -->
                        <div class="space-y-4 mt-8">
                            <div class="flex items-center space-x-3">
                                <div class="mt-1 w-6 h-6 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
                                </div>
                                <p class="text-white/90  mt-1">智能预约管理，减少人工失误</p>
                            </div>
                            <div class="flex items-center space-x-3">
                                <div class="mt-1 w-6 h-6 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
                                </div>
                                <p class="text-white/90  mt-1">多种支付方式，快速完成收银</p>
                            </div>
                            <div class="flex items-center space-x-3">
                                <div class="mt-1 w-6 h-6 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
                                </div>
                                <p class="text-white/90 mt-1">实时数据报表，掌握经营状况</p>
                            </div>
                        </div>
                    </div>

                    <!-- 底部联系信息 -->
                    <div class="mt-12 pt-8 border-t border-white/20 slide-in">
                        <p class="text-white/70 text-sm">需要帮助？</p>
                        <div class="flex items-center space-x-4 mt-2">
                            <Link class="text-white/90 hover:text-white transition-colors" href="#">
                                <icon-phone  class="mr-1" />400-000-0000
                            </Link>
                            <Link class="text-white/90 hover:text-white transition-colors" href="#">
                                <icon-email class="mr-1"   />support@example.com
                            </Link>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧表单区域 -->
            <div class="lg:w-1/2 p-8 lg:p-12 flex flex-col">
                <!-- 登录表单 - 使用 Arco Form 组件 -->
                <div class="flex flex-col items-center gap-3 select-none">
                    <div class="logo">
                        <img
                            :style="{ width: '60px', height: '60px' }"
                            alt="大脸猫发卡"
                            src="/static/images/logo-w.png"
                        />
                    </div>
                </div>
                <a-form
                    ref="loginFormRef"
                    :model="form"
                    :rules="rules"
                    class="mt-8 space-y-6 flex-1"
                    layout="vertical"
                >
                    <a-form-item field="phone" label="商户账号">
                        <a-input
                            v-model="form.phone"
                            class="input-focus"
                            placeholder="请输入手机号"
                            prefix-icon="user"
                        />
                    </a-form-item>

                    <a-form-item field="password" label="密码">
                        <a-input
                            v-model="form.password"
                            class="input-focus"
                            placeholder="请输入密码"
                            prefix-icon="lock"
                            show-password
                            type="password"
                        />
                    </a-form-item>

                    <a-form-item>
                        <div class="w-full flex items-center justify-between">
                            <a-checkbox v-model="form.remember">记住我 30 天</a-checkbox>
                            <a-link href="#">忘记密码？</a-link>
                        </div>
                    </a-form-item>

                    <a-form-item>
                        <a-button
                            :loading="form.processing"
                            long
                            type="primary"
                            @click="handleSubmit"
                        >
                            登录商户中心
                        </a-button>
                    </a-form-item>
                    <a-form-item>
                        <a-button
                            long
                        >
                            前往注册
                        </a-button>
                    </a-form-item>

                     <a-divider :margin="40" class="custom-divider" orientation="center">其他登录方式</a-divider>

                    <div class="flex justify-center space-x-6 pt-2 fade-in text-base text-[#1296DB]">
                        <Link class="flex items-center text-[#07C160]">
                            <icon-wechat :size="18" color="#1296DB"  />
                        </Link>
                        <Link class="flex items-center text-[#1296DB]">
                            <icon-qq :size="18" color="#1296DB"  />
                        </Link>
                        <Link class="flex items-center text-[#E4405F]">
                            <icon-weibo :size="18" color="#E4405F" />
                        </Link>
                    </div>
                </a-form>

                <!-- 页脚 -->
                <div class="mt-12 pt-6 text-center text-sm text-gray-500">
                    <p>© 2025 AHIMU.COM 版权所有</p>
                    <div class="flex justify-center space-x-4 mt-2">
                        <a-link class="hover:text-primary transition-colors" href="#">服务条款</a-link>
                        <a-link class="hover:text-primary transition-colors" href="#">隐私政策</a-link>
                        <a-link class="hover:text-primary transition-colors" href="#">帮助中心</a-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
/* Arco 组件样式调整 */

</style>


